<template>
  <el-progress
    :type="type"
    :percentage="percentage"
    :width="width"
    :stroke-width="strokeWidth"
    :color="color"
    :define-back-color="bgColor"
    :format="format"
    :text="text"
    :stroke-linecap="strokeLinecap"
  ></el-progress>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: "circle",
    },
    percentage: {
      type: Number,
      default: 50,
    },
    width: {
      type: Number,
      default: 148,
    },
    strokeWidth: {
      type: Number,
    },
    color: {
      type: String,
    },
    bgColor: {
      type: String,
    },
    text: {
      type: String,
      default: null,
    },
    strokeLinecap: {
      type: String,
      default: "round",
    },
  },
  methods: {
    format(percentage) {
      return this.text ? `${percentage}%\n${this.text}` : this.percentage + "%";
    },
  },
};
</script>
<style lang="scss" scoped>
.el-progress {
  &::v-deep .el-progress__text {
    white-space: pre; //使百分号与所添加文字换行
    color: #2087d0 !important;
  }
}
</style>
